<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>访问本地摄像头</title>
</head>
<body>
	<video id="video" width="800" height="600" autoplay></video>
	<canvas id="canvas" width="800" height="600" style="display: none;"></canvas>
	<img src="" alt="" id="img">
	<script>
	//navigator.getUserMedia ( constraints, successCallback, errorCallback );

	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||window.navigator.mozGetUserMedia;
	window.URL = window.URL || window.webkitURL;

	var video = document.getElementById("video");

	//获取用户摄像头
	// navigator.getUserMedia(
	// 	{video:true,audio:true},
	// 	function(stream) {
	// 		video.src = window.URL.createObjectURL(stream);
	// 	},
	// 	function(err) {
	// 		console.log(err);
	// 	}
	// )

	//结合canvas实现拍照功能
	video.addEventListener('click',snapshot,false);
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var localMediaStream = null;
	navigator.getUserMedia({video:true,audio:true},
		function(stream) {
			video.src = window.URL.createObjectURL(stream);
			localMediaStream = stream;
		},
		function(err) {
			console.log(err);
		}
	)
	function snapshot() {
		if(localMediaStream) {
			ctx.drawImage(video,0,0);
			document.getElementById('img').src = canvas.toDataURL('image/png');
		}
	}

	</script>
</body>
</html>